<template>
  <view class="container">
    <view
      v-if="label"
      class="label-view"
      :class="[outlined && 'label-border']"
      :style="{ padding: paddingRpx, background: outlined ? '' : background }"
    >
      <text :style="{ color, fontSize: fontSize + 'rpx' }" class="text">{{ label }}</text>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { computed, type PropType } from 'vue';

  const props = defineProps({
    label: {
      type: String,
      default: '',
    },
    outlined: propTypes.bool.def(false),
    padding: {
      type: Array as PropType<Number[]>,
      default: [4, 12],
    },
    background: {
      type: String,
      default: 'linear-gradient(90deg, #FDEDC7 0.12%, #F7D9A2 100%)',
    },
    color: {
      type: String,
      default: '#EA5E0E',
    },
    fontSize: {
      type: Number,
      default: 20,
    },
  });

  const paddingRpx = computed(() => {
    console.log(props.padding.map((item) => item + 'rpx').join(' '));

    return props.padding.map((item) => item + 'rpx').join(' ');
  });
</script>
<style lang="scss" scoped>
  .container {
    margin: 12rpx 0;
    .label-view {
      border-radius: 4rpx;
      display: flex;
      width: fit-content;
    }
    .label-border {
      border: 1px solid #ea5e0e;
    }
  }
</style>
